<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Message 全局提示</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons-vue.js"></script>
</head>
<style type="text/css">
.diy-class{
	color: red;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">Hooks 调用（推荐）（实测发现不能用）</a-divider><!-- =============================================================== -->
	<p class="desc">通过 message.useMessage 创建支持读取 context 的 contextHolder。</p>
	<p class="desc">请注意，我们推荐通过顶层注册的方式代替 message 静态方法，因为静态方法无法消费上下文，因而 ConfigProvider 的数据也不会生效。</p>
	<context-holder></context-holder>
	<!-- <contextHolder></contextHolder> -->
	<a-button type="primary" @click="info1" style="margin-left: 20px;">显示一个消息</a-button>
	
	<a-divider class="a-divi" orientation="left">修改延时</a-divider><!-- =============================================================== -->
	<p class="desc">自定义时长 10s，默认时长为 3s。</p>
	<a-button type="primary" @click="info2" style="margin-left: 20px;">10秒的提示信息</a-button>
	
	<a-divider class="a-divi" orientation="left">加载中</a-divider><!-- =============================================================== -->
	<p class="desc">进行全局 loading，异步自行移除。</p>
	<a-button type="primary" @click="info3" style="margin-left: 20px;">加载中提示</a-button>
	
	<a-divider class="a-divi" orientation="left">更新消息内容</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过唯一的 key 来更新内容、或者响应式数据。</p>
	<a-button type="primary" @click="info4" style="margin-left: 20px;">提示1</a-button>
	<a-button type="primary" @click="info5" style="margin-left: 20px;">提示2</a-button>
	
	<a-divider class="a-divi" orientation="left">普通提示</a-divider><!-- =============================================================== -->
	<p class="desc">信息提醒反馈。</p>
	<a-button type="primary" @click="info6" style="margin-left: 20px;">普通提示</a-button>
	
	<a-divider class="a-divi" orientation="left">其他提示类型</a-divider><!-- =============================================================== -->
	<p class="desc">包括成功、失败、警告。</p>
	<a-space style="margin-left: 20px;">
		<a-button @click="success">Success</a-button>
		<a-button @click="error">Error</a-button>
		<a-button @click="warning">Warning</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">Promise 接口</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 message 将要结束时通过 then 显示新的 message 。</p>
	<a-button @click="info7" style="margin-left: 20px;">显示一系列消息</a-button>
	<a-button @click="info71" style="margin-left: 20px;">全部参数</a-button>
	
	<a-divider class="a-divi" orientation="left">自定义样式</a-divider><!-- =============================================================== -->
	<p class="desc">使用 style 和 class 来定义样式。</p>
	<a-button @click="info8" style="margin-left: 20px;">自定义样式</a-button>
	
	<a-divider class="a-divi" orientation="left">其他用法</a-divider><!-- =============================================================== -->
	<p class="desc">通过阅读文档想出来的用法。</p>
	<a-button @click="info10" style="margin-left: 20px;">消息框消失后执行代码</a-button>
	
	
	
	
	
<br><br><br><hr>
组件提供了一些静态方法，使用方式和参数如下：
	message.success(content, [duration], onClose)
	message.error(content, [duration], onClose)
	message.info(content, [duration], onClose)
	message.warning(content, [duration], onClose)
	message.warn(content, [duration], onClose) // alias of warning
	message.loading(content, [duration], onClose)
参数		说明			类型			默认值
content		提示内容		string| VNode | () => VNode		-
duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3
onClose		关闭时触发的回调函数	function	-

组件同时提供 promise 接口
	message[level](content, [duration]).then(afterClose)
	message[level](content, [duration], onClose).then(afterClose)
其中message[level] 是组件已经提供的静态方法。then 接口返回值是 Promise 。
也可以对象的形式传递参数：
	message.open(config)
	message.success(config)
	message.error(config)
	message.info(config)
	message.warning(config)
	message.warn(config) // alias of warning
	message.loading(config)
config 对象属性如下：
	参数	说明	类型	默认值	版本
	class	自定义 CSS class	string	-	
	content	提示内容	string| VNode | ()=> VNode	-	
	duration	自动关闭的延时，单位秒。设为 0 时不自动关闭。	number	3	
	icon	自定义图标	VNode | () => VNode	-	
	key	当前提示的唯一标志	string | number	-	
	style	自定义内联样式	CSSProperties	-	
	onClick	点击 message 时触发的回调函数	function	-	
	onClose	关闭时触发的回调函数	function	-

全局方法 #
还提供了全局配置和全局销毁方法：
	message.config(options)
	message.destroy()
	message.useMessage()
	message.config #
message.config({
  top: `100px`,
  duration: 2,
  maxCount: 3,
  rtl: true,
  prefixCls: 'my-message',
});
参数	说明	类型	默认值	版本	
duration	默认自动关闭延时，单位秒	number	3		
getContainer	配置渲染节点的输出位置	() => HTMLElement	() => document.body		
maxCount	最大显示数, 超过限制时，最早的消息会被自动关闭	number	-		
prefixCls	消息节点的 className 前缀	string	ant-message	3.0	
rtl	是否开启 RTL 模式	boolean	false		
top	消息距离顶部的位置	string	8px
	
	
</div>
<div class="h100"></div>

</body>
<script>
const [messageApi, contextHolder] = antd.message.useMessage();
// console.log(messageApi);
// console.log(contextHolder);
const Main = {
data() {
	return {
		messageApi,
		contextHolder,
		def_msg: 'Loading...',
	}
},
mounted: function(){
	// console.log("实例挂载完成后被调用");
	// console.log(antd.message);
	// message的全局方法（感觉这个还是有点用的）
	antd.message.config({
		top: `100px`,
		// duration: 0,
		maxCount: 5,
		// rtl: true,
		// prefixCls: 'my-message9999999999',
	});
	
	this.$nextTick(function () {
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		
	});
	// console.log("实例挂载完成后被调用2");
},
methods:{
	info1(){
		console.log(messageApi);
		// console.log(messageApi.info('欢迎来到'));
		messageApi.info("这种方式不能用");
		// messageApi.open({content: 'Loading...'});
	},
	info2(){
		antd.message.info('这条消息要停留10秒', 10);
	},
	info3(){
		const hide = antd.message.loading('Action in progress..', 0);
		setTimeout(hide, 2500);
		// console.log(hide);
	},
	info4(){
		antd.message.loading({ content: 'Loading...', key: 'updatable', duration: 0 });
		setTimeout(() => {
			antd.message.success({ content: 'Loaded!', key: 'updatable', duration: 2 });
		}, 1000);
	},
	info5(){
		let hide = antd.message.loading({ content: () => this.def_msg, duration: 0 });
		setTimeout(() => {
			this.def_msg = 'Loaded!';
			setTimeout(hide, 2500);
		}, 1000);
	},
	info6(){
		antd.message.info('普通提示信息的演示。');
	},
	
	success(){
		antd.message.success('Success提示信息的演示。');
	},
	error(){
		antd.message.error('Error提示信息的演示。');
	},
	warning(){
		antd.message.warning('Warning提示信息的演示。');
	},
	
	info7(){
		antd.message.loading('发起请求..', 2.5).then(
			() => antd.message.success('获取响应1', 2.5),
			() => {console.log('这里为什么不执行？');},
			// () => {
			// 	antd.message.success('获取响应2', 2.5);
			// 	console.log('这里可以执行，但好像不是线性的');
			// }
		).then(
			() => antd.message.info('展示数据', 2.5)
		).then(
			() => {console.log('似乎可以更多的then');},
		);
	},
	info71(){
		// message[level](config).then(afterClose)
		antd.message.loading({
			content: () => ' 这是一条带有全部参数的提示消息',
			class: 'diy-class',
			style: {
				marginTop: '15vh',
			},
			duration: 2.5,
			icon: () => Vue.h(ElementPlusIconsVue.Grid, {class: "aut-icon"}),
			key: 'ki45ji45h7k',		//key的作用，看看“更新消息内容”info4()方法
			onClick: ()=>{
				console.log("点击 message 时触发的回调函数");
			},
			onClose: ()=>{
				console.log("关闭时触发的回调函数");
			}
		}).then(
			() => {console.log('似乎可以更多的then');},
		);
	},
	info8(){
		antd.message.success({
			content: () => '这是一条带有自定义类名和样式的提示消息',
			class: 'diy-class',
			style: {
				marginTop: '20vh',
			},
			duration: 2.5,
		});
	},
	
	info10(){
		antd.message.success('我消失后，看控制台', 1, ()=>{
			console.log('信息框消失了');
		});
		// antd.message.success('我消失后，看控制台（也可以传入一个回调函数）', 1, this.onClose())
	},
	onClose(){
		return function(){
			console.log('信息框消失了2');
		}
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
